<template>
  <div class="index-form form-contain">
    <div class="index-right">
      <div class="index-banner">什么是社交广告？</div>
      <div class="index-detalis">
       腾讯社交广告是由腾讯公司推出的效果广告系统。它是国内领先的效果广告营销平台，依托于腾讯海量优质流量资源，给广告主提供跨平台、跨终端的网络推广方案，并利用腾讯大数据处理算法实现成本可控、效果客观、智能投放的互联网效果广告平台。
      </div>
      <div class="advertising">
        您的广告可以展示在这里
      </div>
      <div class="friends">
         <img src="static/images/图层 4@3x.png">
         <span>朋友圈广告</span>
      </div>
      <img src="static/images/sj1.png" class="sj1">
      <div class="friend">
         <img src="static/images/图层 4@3x.png">
         <span>公众号广告</span>
      </div>
      <img src="static/images/sj2.png" class="sj2">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      imgList: [],
      form: {
      }
    }
  },
  created () {
  },
  methods: {}
}
</script>

<style lang="less">
.index-form{
  .el-upload-list__item,
  .el-upload--picture-card{
    height: 100px;
    width: 200px;
  }
  .el-upload--picture-card{
    line-height: 100px;
  }
  .index-left{
    float: left;
    width: 10%;
    p{
      color: #101010;
      text-align: right;
      line-height: 200px;
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
  .index-banner{
    width:7.5625rem;
height:.8125rem;
font-size:.875rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.0235rem;
text-align: center;
  }
  .index-detalis{
    width:21rem;
height:4.6875rem;
font-size:.75rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
  }
  .advertising{
    width:8.875rem;
height:.6875rem;
font-size:.625rem;
font-weight:400;
color:rgba(51,51,51,1);
margin: 0 auto;
text-align: center;
  }
  .friends{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img{
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 42.5%;
    top: 12.5rem;
    }
  }
  .friend{
    width: 100%;
    height: auto;
    margin: 0 auto;
margin-top: .9375rem;
    img{
      display: block;
      width: 6.5625rem;
      height: 2rem;
      text-align: center;
      margin: 0 auto;
    }
    span{
      display:block;
      width:4.3125rem;
height:.4375rem;
font-size:.73rem;
font-weight:400;
color:rgba(255,255,255,1);
margin: 0 auto;
    position: absolute;
    left: 42.5%;
    top: 26.5rem;
    }
  }
  .sj1{
    display: block;
    width:13.3125rem;
height:11rem;
margin: 0 auto;
  }
  .sj2{
     display: block;
    width:15rem;
height:8.0625rem;
margin: 0 auto;
margin-top: .9375rem;
  }
}
</style>
